<template>
	<view class="after-sales-details">
		<view class="row-1">
			<view class="title">{{title}}</view>
			<view>
				<u-steps :current="current" :dot="true" inactiveColor="#EEEEEE" activeColor="#FFFFFF">
					<u-steps-item v-for="(item,index) in stepData" :error="false" :title="item.name" :key="index">
					</u-steps-item>
				</u-steps>
			</view>
		</view>
		<view class="row-2">
			<image :src="realmName + detailsData.goodsPic" mode="aspectFill" class="image"></image>
			<view class="box">
				<view class="title">{{detailsData.goodsName || ''}}</view>
				<view class="tips">
					<view>
						<text>单价：</text>
						<text class="numb">￥{{detailsData.price || ''}}</text>
					</view>
					<view style="margin-left: 32rpx;">
						<text>申请数量：</text>
						<text class="numb">{{detailsData.num || ''}}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="row-3">
			<view class="item">
				<view class="title">退款金额</view>
				<view class="details">
					<view class="tips1">微信支付</view>
					<view class="tips2">￥{{detailsData.refundAmount || ''}}</view>
				</view>
			</view>
			<!-- <view class="item">
				<view class="title">退回虚拟资产</view>
				<view class="details">
					<view class="tips1">优惠券</view>
					<view class="tips2">￥{{detailsData.}}</view>
				</view>
			</view> -->
		</view>

		<view class="row-4">
			<view class="item">
				<view class="label">服务单号</view>
				<view class="value">{{detailsData.orderGoodsNumber}}</view>
			</view>
			<view class="item" v-if="detailsData.refundReviewTime">
				<view class="label">申请时间</view>
				<view class="value">{{detailsData.refundReviewTime | detailsDataRefundReviewTime}}</view>
			</view>
			<view class="item" v-if="detailsData.afterSalesType">
				<view class="label">服务类型</view>
				<view class="value">{{detailsData.afterSalesType | detailsDataAfterSalesType}}</view>
			</view>
			<view class="item" v-if="detailsData.refundReason">
				<view class="label">申请原因</view>
				<view class="value">{{detailsData.refundReason || ''}}</view>
			</view>
			<view class="item">
				<view class="label">退款方式</view>
				<view class="value">原支付返还</view>
			</view>
			<view class="item" v-if="Number(detailsData.afterSalesType) == 1">
				<view class="label">返件方式</view>
				<view class="value">快递至商家</view>
			</view>
		</view>

		<view class="row-5"
			v-if="(Number(detailsData.refundStatus) == 3 && Number(detailsData.afterSalesType) == 1) || detailsData.returnGoodsLogisticsCode">
			<view class="item">
				<view class="label">快递公司</view>
				<view class="value">
					<input type="text" v-model="val1" class="input" placeholder="请输入"
						:disabled="Number(detailsData.refundStatus) != 3">
				</view>
			</view>
			<view class="item">
				<view class="label">快递单号</view>
				<view class="value">
					<input type="text" v-model="val2" class="input" placeholder="请输入"
						:disabled="Number(detailsData.refundStatus) != 3">
				</view>
			</view>
		</view>
		<view class="btn" @click="handleSubmit"
			v-if="Number(detailsData.refundStatus) == 3 && Number(detailsData.afterSalesType) == 1">确认发货</view>
	</view>
</template>

<script>
	import {
		getByOrderGoodsNumber,
		addLogistics
	} from "@/culturalCreativity/http/my.js";
	import {
		dateFormat
	} from "@/utils/pay.js";
	import {
		realmName
	} from "@/http";
	export default {
		data() {
			return {
				realmName,
				val1: "",
				val2: "",
				pageData: {},
				detailsData: {},
			}
		},
		async onShow() {
			this.getList();
		},
		methods: {
			async getList() {
				uni.showLoading({
					title: "加载中...",
					mask: true
				})
				this.pageData = uni.getStorageSync('PAGE_DATA');
				let res = await getByOrderGoodsNumber(this.pageData.orderGoodsNumber);
				this.detailsData = res.data.data;
				if(this.detailsData.returnGoodsLogisticsName){ //回显物流单
					this.val1 = this.detailsData.returnGoodsLogisticsName;
					this.val2 = this.detailsData.returnGoodsLogisticsCode;
				}
				uni.hideLoading();
			},
			async handleSubmit() {
				if(!this.val1) return uni.showToast({
					title:"请输入物流名称",
					icon:"none"
				});
				if(!this.val2) return uni.showToast({
					title:"请输入物流单号",
					icon:"none"
				});
				uni.showLoading({
					title: "正在确认",
					mask: true
				});
				let res = await addLogistics({
					id: this.detailsData.id,
					returnGoodsLogisticsName: this.val1,
					returnGoodsLogisticsCode: this.val2
				});
				this.getList();
			},
			getStatusName(numb) {
				switch (numb) {
					case 1:
						return "退款成功";
					case 2:
						return "退款审核中";
					case 3:
						return "等待商品寄回";
					case 4:
						return "已收到退回货物";
					case 5:
						return "退款中";
					case 6:
						return "退款完成";
					case 7:
						return "拒绝退款";
					case 8:
						return "换货审核通过";
					case 9:
						return "换货中";
					case 10:
						return "退款中";
					case 11:
						return "等待收货";
					default:
						break;
				}
			}
		},
		computed: {
			title() {
				return this.getStatusName(Number(this.detailsData.refundStatus));
			},
			stepData() {
				let numb = Number(this.detailsData.afterSalesType);
				let arr = [];
				if (numb == 1) {
					arr = [{
						name: '提交申请'
					}, {
						name: '商家审核',
						state: [2, 7]
					}, {
						name: '商家收货',
						state: [3, 11, 4]
					}, {
						name: '退款完成',
						state: [6]
					}];
				}
				if (numb == 2) {
					arr = [{
						name: '提交申请',
					}, {
						name: '商家审核',
						state: [2, 7]
					}, {
						name: '退款完成',
						state: [6]
					}];
				}
				arr = arr.map(item => {
					if (item.state) {
						item.state.forEach(i => {
							if (Number(this.detailsData.refundStatus) == i) {
								item.name = this.getStatusName(i);
								if (i == 7 && Number(this.detailsData.refundStatus) == 7) {
									item.error = true;
								}
							}
						});
					}
					return item;
				});
				return arr;
			},
			current() {
				if (!this.stepData.length) return 0;
				let numb = 0;
				this.stepData.forEach((item, index) => {
					if (item.state) {
						if (item.state.some(i => i == Number(this.detailsData.refundStatus))) {
							numb = index;
						}
					}
				});
				return numb
			}
		},
		filters: {
			detailsDataRefundReviewTime(str) { //时间转
				if (!str) return '';
				return dateFormat("YYYY-mm-dd HH:MM:SS", new Date(str));
			},
			detailsDataAfterSalesType(num) {
				switch (Number(num)) {
					case 1:
						return '退货';
					case 2:
						return '退款'
					case 3:
						return '换货';
					default:
						return ''
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-steps-item__wrapper {
		background-color: transparent !important;
	}

	::v-deep .u-text__value {
		color: #EEEEEE !important;
		font-size: 22rpx !important;
	}

	::v-deep .u-text__value--main {
		color: #FFFFFF !important;
		font-size: 24rpx !important;
	}

	.after-sales-details {
		padding-bottom: 200rpx;

		.btn {
			margin: 0 auto;
			margin-top: 84rpx;
			width: 686rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background: #FD8F19;
			color: #FFFFFF;
			border-radius: 40rpx;
		}

		.row-5 {
			margin: 0 32rpx;
			margin-top: 24rpx;
			background: #FFFFFF;
			border-radius: 30rpx;
			padding: 0 24rpx;
			font-size: 24rpx;

			.item {
				display: flex;
				padding: 24rpx 0;
				display: flex;
				align-items: center;

				&+.item {
					border: 1px solid #EEEEEE;
				}

				.label {
					color: #878787;
					width: 128rpx;
				}

				.value {
					flex: 1;

					.input {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.row-4 {
			margin: 0 32rpx;
			margin-top: 24rpx;
			background: #FFFFFF;
			border-radius: 30rpx;
			font-size: 24rpx;
			color: #1F1F1F;
			padding: 24rpx;

			.item {
				display: flex;

				&+.item {
					margin-top: 24rpx;
				}

				.label {
					color: #878787;
					width: 128rpx;
				}
			}
		}

		.row-3 {
			margin: 0 32rpx;
			margin-top: 24rpx;
			background: #FFFFFF;
			border-radius: 30rpx;
			box-sizing: border-box;
			padding: 0 24rpx;

			.item {
				height: 138rpx;
				color: #1F1F1F;
				font-size: 24rpx;

				// &:nth-of-type(1) {
				// 	border-bottom: 1px solid #EEEEEE;
				// }

				.title {
					padding: 24rpx 0;
				}

				.details {
					display: flex;
					justify-content: space-between;

					.tips1 {
						color: #878787;
					}
				}
			}
		}

		.row-2 {
			margin: 0 32rpx;
			margin-top: -70rpx;
			height: 168rpx;
			background: #FFFFFF;
			border-radius: 30rpx;
			display: flex;
			align-items: center;
			padding: 0 24rpx;
			box-sizing: border-box;

			.box {
				display: flex;
				justify-content: space-between;
				flex-direction: column;
				font-size: 24rpx;
				height: 120rpx;

				.tips {
					display: flex;
					color: #878787;

					.numb {
						color: #1F1F1F;
					}
				}
			}

			.image {
				max-width: 120rpx;
				min-width: 120rpx;
				height: 120rpx;
				border-radius: 16rpx;
				margin-right: 12rpx;
			}
		}

		.row-1 {
			height: 278rpx;
			background: #FD8F19;
			padding-top: 32rpx;
			box-sizing: border-box;

			.title {
				padding-left: 52rpx;
				font-size: 34rpx;
				color: #FFFFFF;
				margin-bottom: 24rpx;
			}
		}

		&::after {
			content: "";
			position: fixed;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			z-index: -1;
			background-color: #F7F7F7;
		}
	}
</style>
